<template>
  <div id="centreRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">人员变动</span>
      </div>
      <div>
        <v-row>
          <v-col cols="4" md="4">
            <dv-digital-flop :config="sumNumber"  />
          </v-col>
           <v-col cols="4" md="4">
              <dv-digital-flop :config="empNumber" />
          </v-col>
           <v-col cols="4" md="4">
             <dv-digital-flop :config="leaveNumber"  />
          </v-col>
        </v-row>
        
      
       
      </div>
    </div>
  </div>
</template>

<script>
//import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1";

export default {
  props: ["listData"],
  watch: {
    listData(newValue) {
      // const { config } = this;
      // this.config.data = newValue;
      // this.config = { ...this.config };
      var sum = 0;
      newValue.forEach(element => {
        sum += element.value;
      });
      console.log(sum);
      this.sumNumber.number[0] = sum;
      // this.sumNumber = { ...this.sumNumber };
    }
  },
  data() {
    return {
      empNumber: {
        number: [0],
        content: "年度入职+{nt}人",
        style:{
          fontSize:20
        }
      },
      sumNumber: {
        number: [0],
        content: "总人数{nt}人",
        style:{
          fontSize:20
        }
      },
      leaveNumber: {
        number: [0],
        content: "年度离职-{nt}人",
        style:{
          fontSize:20
        }
      }
    };
  },
  // components: { centreRight2Chart1 },
  mounted() {
    this.changeTiming();
  },
  methods: {
    changeTiming() {
      setInterval(() => {
        this.changeNumber();
      }, 3000);
      setInterval(() => {
        this.changeNumber2();
      }, 10000);
    },
    changeNumber() {
      this.empNumber.number[0] = this.empNumber.number[0] + 1;
      this.sumNumber.number[0] = this.sumNumber.number[0] + 1;
      this.empNumber = { ...this.empNumber };
      this.sumNumber = { ...this.sumNumber };
    },
    changeNumber2() {
      this.leaveNumber.number[0] = this.leaveNumber.number[0] + 1;
      this.sumNumber.number[0] = this.sumNumber.number[0] - 1;
      this.leaveNumber = { ...this.leaveNumber };
      this.sumNumber = { ...this.sumNumber };
    }
  }
};
</script>

<style >
#centreRight2 {
  padding: 5px;
  height: 200px;
  min-width: 300px;
  border-radius: 5px;
}
.bg-color-black {
  padding: 5px;
  height: 200px;
  border-radius: 10px;
}
.text {
  color: #c3cbde;
}
.body-box {
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
}
</style>